<template>
	<div class="inner">
		<div id="grade">
			<p>备注：将满足条件的附加分添加到下列表格中</p>
			<slot name="header"></slot>
			<el-row>
				<span>含等级：</span>
				<el-cascader 
					v-model="grade_id_list" 
					value-key="name" 
					:options="haveRankList" 
					:props="{label:'name',value: 'id',children: 'additional_rank',expandTrigger: 'hover'}"
					ref="bonu_item" 
					clearable filterable>
				</el-cascader>
				<el-button style="margin-left: 10px;" type="primary" @click="add_grade_items">添加</el-button>
			</el-row>
			<el-table :data="grade_bonus_items">
				<el-table-column label="附加分名称" prop="name"></el-table-column>
				<el-table-column label="类型" prop="nature"></el-table-column>
				<el-table-column label="自评等级" prop="additional_rank"></el-table-column>
				<el-table-column label="规定分数" prop="fraction"></el-table-column>
				<el-table-column label="补充分数" prop="supplement">
					<template slot-scope="scope">
						<el-input v-model="scope.row.supplement" clearable>
						</el-input>
					</template>
				</el-table-column>
				<el-table-column label="证书名称" prop="certificate" v-if="type_id == 3">
					<template slot-scope="scope">
						<el-input v-model="scope.row.certificate" clearable>
						</el-input>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="danger" icon="el-icon-delete" circle @click="delete_grade_item(scope.$index, scope.row)"></el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- 无等级部分 -->
		<div id="no_grade" v-if="type_id != 3">
			<el-row style="margin-top: 20px;">
				<span>无等级：</span>
				<el-select v-model="other_data" clearable filterable placeholder="请选择" value-key="name">
					<el-option v-for="item in noRankList" :key="item.id" :label="item.name" :value="item" ref="bonu_item_no_grade">
					</el-option>
				</el-select>
				<el-button style="margin-left: 10px;" type="primary" @click="add_items">添加</el-button>
			</el-row>
			<el-table :data="other_bonus_items">
				<el-table-column prop="name" label="附加分名称"></el-table-column>
				<el-table-column label="类型" prop="nature"></el-table-column>
				<el-table-column label="规定分数" prop="fraction"></el-table-column>
				<el-table-column label="补充数量" prop="num">
					<template slot-scope="scope">
						<el-input validate-event v-model="scope.row.num" clearable>
						</el-input>
					</template>
				</el-table-column>
				<el-table-column label="补充说明" prop="explain">
					<template slot-scope="scope">
						<el-input validate-event v-model="scope.row.explain" clearable>
						</el-input>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="danger" icon="el-icon-delete" circle @click="delete_item(scope.$index, scope.row)"></el-button>
					</template>
				</el-table-column>
			</el-table>

		</div>
		<!-- 		<el-table :data="haveRankList" style="width: 100%" border>
			<el-table-column prop="name" label="名称" width="180">
			</el-table-column>
			<el-table-column prop="additional_rank" label="等级">
				<template v-slot="scope">
					<el-checkbox-group v-model="result.rankFractionList[scope.$index]" :min="0" :max="1">
						<el-checkbox v-for="(item, index) in scope.row.additional_rank" :label="item.fraction" :key="item.fraction">{{item.name}}</el-checkbox>
					</el-checkbox-group>
				</template>
			</el-table-column>
			<el-table-column label="分数" width="50" prop="fraction">
				<template v-slot="scope">
					{{result.rankFractionList[scope.$index][0]}}
				</template>
			</el-table-column>
		</el-table> -->
	</div>
</template>

<script>
	import {
		request
	} from '../../request/http.js'
	export default {
		data() {
			return {
				haveRankList: [],
				noRankList: [],
				grade_bonus_items: [], // 等级加分项目
				other_bonus_items: [], // 无等级加分项
				merge_data: [], // 子组件提交到父组件的数组
				// result: {
				// 	"rankFractionList": []
				// },
				grade_id_list: '',
				other_data: '',
			}
		},
		name: 'Study',
		props: {
			type_id: String,
			scholarship_id: Number
		},
		created() {
			this.getScoreList()
		},
		methods: {
			// 添加到表格
			add_grade_items() {
				var rank_list = JSON.parse(localStorage.getItem('rank_list')) // 获取id对应等级分数列表
				var data = {
					"name": this.$refs['bonu_item'].inputValue.split(' / ')[0],
					"additional_rank": this.$refs['bonu_item'].inputValue.split(' / ')[1],
					// 因为id是从1开始,索引从0开始,所以取到id后,索引要减1
					"fraction": rank_list[this.grade_id_list[1] - 1]['fraction']
				}
				for (var item in this.haveRankList) {
					if (this.haveRankList[item].name == data.name) {
						data.nature = this.haveRankList[item].nature
						data.nature = data.nature == 1 ? "加分" : "扣分"
					}
				}
				this.grade_bonus_items.push(data)
			},
			add_items() {
				this.other_data.nature = this.other_data.nature == 1 ? "加分" : "扣分"
				this.$set(this.other_data, 'num', 1)
				this.other_bonus_items.push(this.other_data)
			},
			// 删除一行记录
			delete_grade_item(index, scope) {
				this.grade_bonus_items.splice(index, 1)
			},
			delete_item(index, scope) {
				this.other_bonus_items.splice(index, 1)
			},
			// 判断是否为空
			isEmpty(obj) {
				let empty = true;
				for (let key in obj) {
					if (obj[key] == null) {
						empty = false;
						break;
					}
				}
				return empty
			},
			filterEmpty(array) {
				return array.filter(item => !this.isEmpty(item))
			},
			getScoreList() {
				request({
					url: "/score-rule/get-score-list/",
					params: {
						"type_id": this.type_id,
						"scholarship_id": this.scholarship_id
					}
				}).then(res => {
					// 区分等级的加分项列表
					this.haveRankList = this.filterEmpty(res.data)

					// 没有等级的加分项
					this.noRankList = res.data.filter((val) => {
						return this.haveRankList.indexOf(val) === -1
					})
					// 初始化装填分数的列表
					// for (let key in this.haveRankList) {
					// 	this.result.rankFractionList[key] = []
					// }

				}).catch(err => {
					this.$toast(err.message, 'error')
				})
			},
		},
		watch: {
			// 奖学金类型改变时，重新请求
			scholarship_id(n, o) {
				this.getScoreList()
			},
			grade_bonus_items(n, o) {
				this.merge_data = this.grade_bonus_items.concat(this.other_bonus_items)
				if (this.type_id == 1) {
					this.$emit("listen_character", this.merge_data)
				} else if (this.type_id == 2) {
					this.$emit("listen_study", this.merge_data)
				} else if (this.type_id == 3) {
					this.$emit("listen_style", this.merge_data)
				}
			},
			other_bonus_items(n ,o) {
				this.merge_data = this.grade_bonus_items.concat(this.other_bonus_items)
				if (this.type_id == 1) {
					this.$emit("listen_character", this.merge_data)
				} else if (this.type_id == 2) {
					this.$emit("listen_study", this.merge_data)
				} else if (this.type_id == 3) {
					this.$emit("listen_style", this.merge_data)
				}
			}
		}
	}
</script>

<style>
</style>
